<template>
  <div style="height: 100%;">
    <div style="height: 100%;width: 1000px;margin: auto">
      <a-layout-header class="sflheader loginDoormanHeader">
        <p style="display: inline-block; font-size: 18px; color: #fff; float: left;">舍弗勒-安保管理系统</p>
        <img src="https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/logo2.png" alt="" style="float: right;margin: 18px 10px 0px 10px" >

        <div style="float:right;margin-right: 10px;">
          <a-dropdown>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              <a-avatar style="backgroundColor:#00893d" icon="user" />
              <span style="color: #fff;font-size: 14px;">{{user.userNO}}</span>
            </a>
            <a-menu slot="overlay" style="top: 10px;">
              <a-menu-item>
                <a href="javascript:;" @click="quitLogin">退出登录</a>
              </a-menu-item>

            </a-menu>
          </a-dropdown>
        </div>

      </a-layout-header>
      <!--忘带卡登记-->
     <div class="flex" style="height: 100%;">
       <a-form layout="horizontal" style="width: 400px;">
         <a-form-item
         label="工号"
         :label-col="formItemLayout.labelCol"
         :wrapper-col="formItemLayout.wrapperCol"
       >
           <a-input
             v-show="params.userNo != ''"
             allowClear
             v-model="params.userNo"
             placeholder="请扫描二维码输入工号"
             @change="changeUserNo"
           />
           <a-input-password
             ref="inputPassword"
             allowClear
             v-model="reserveUserNo"
             placeholder="请扫描二维码输入工号"
             @search="onSearch"
             @pressEnter="pressEnter"
             v-show="params.userNo == ''"
           />

       </a-form-item>
         <a-form-item
           label="姓名"
           :label-col="formItemLayout.labelCol"
           :wrapper-col="formItemLayout.wrapperCol"
         >
           <a-input v-model="params.userName" :disabled="disabled" placeholder="姓名" />
         </a-form-item>
         <a-form-item
           label="部门"
           :label-col="formItemLayout.labelCol"
           :wrapper-col="formItemLayout.wrapperCol"
         >
           <a-input v-model="params.depName" :disabled="disabled" placeholder="部门" />
         </a-form-item>
         <a-form-item
           label="工作地点"
           :label-col="formItemLayout.labelCol"
           :wrapper-col="formItemLayout.wrapperCol"
         >
           <a-input v-model="params.workPlace" :disabled="disabled" placeholder="工作地点" />
         </a-form-item>
         <a-form-item
           label="忘带卡类型"
           :label-col="formItemLayout.labelCol"
           :wrapper-col="formItemLayout.wrapperCol"
         >
           <a-select style="width: 100%" @change="handleChange" v-model="forgotTypeValue" placeholder="请选择忘带卡类型">
             <a-select-option :key="item.id" v-for="item in forgotTypes">
               {{item.name}}
             </a-select-option>
           </a-select>
         </a-form-item>

         <a-form-item
           label=" "
           :colon="false"
           :label-col="formItemLayout.labelCol"
           :wrapper-col="formItemLayout.wrapperCol"
         >
           <a-button type="primary" style="width: 100%" :disabled="saveButtonDisabled" @click="submit">
             保存
           </a-button>
           <!--<a-button type="primary" style="width: 100%" @click="testFeatures">-->
             <!--清除下拉-->
           <!--</a-button>-->
         </a-form-item>

         <a-form-item
           label=" "
           :colon="false"
           :label-col="formItemLayout.labelCol"
           :wrapper-col="formItemLayout.wrapperCol"
         >
         </a-form-item>

       </a-form>
     </div>

      <!--加载中-->
      <customLoading :customVisible="spinning" :title="title"></customLoading>

    </div>
  </div>
</template>

<script>
  import forgotCardManageApi from "@/api/forgotCardManage";
  import reservationApi from "@/api/reservation";
  import axios from 'axios'
  axios.defaults.withCredentials = true;

  export default {
    components: {

    },
    name: '',
    data() {
      return {
        formItemLayout:{
          labelCol: { span: 6 },
          wrapperCol: { span: 18 },
        },
        changeInputShow:true,
        changeValue:"",
        params:{
          userNo:"",
          userName:"",
          depName:"",
          workPlace:""
        },
        reserveUserNo:"",  //读取网址用，隐藏的
        disabled: true,
        saveButtonDisabled: true,
        spinning: false,
        title:"保存中...",
        forgotTypes:[],
        forgotTypeValue: undefined,
        forgotTypeId: "",
        user:{
          userNO: "--",
          userSerial: ""
        },
      }

    },
    created() {

    },
    beforeMount(){
      let that = this;
      console.log(this.$store.state);
      if (this.$store.state.user.userSerial) {
        this.user = this.$store.state.user;
      } else {
        this.$warning({
          title: '未获取到登录信息，请重新登录！',
          destroyOnClose: false,
          maskClosable: false,
          keyboard: false,
          okText: '去登录',
          onOk() { that.quitLogin() },
        });
      }
    },
    mounted() {
      this.findRegionList();    // 获取忘带卡类型
    },
    destroyed () {

    },
    methods: {
      // 回调测试
      testFeatures(){
        localStorage.setItem("user", JSON.stringify({}));
        this.$store.commit("addUser",JSON.stringify({}));
        console.log(this.$store.state);
        // this.forgotTypeValue = undefined;
        // this.forgotTypeId = "";
        // https://wx-account.Schaefflercn.com/user/owner/qrcode/jLWdXzzmdOjShvH
        // axios.get('https://wx-account.schaefflercn.com/user/owner/qrcode/ERTSNMObobajizJ').then(function(response) {
        //   console.log(response);
        // });
      },
      // 获取忘带卡类型
      async findRegionList() {
        let resp = await reservationApi.getBdSysItemTypeList({typeId: 208});
        // console.log(resp);
        if (resp.data.success) {
          this.forgotTypes = resp.data.result;
        } else {
          this.$message.error(resp.data.message);
        }
      },

      handleChange(value){
        this.forgotTypeId = value;
      },
      changeUserNo(e){
        console.log(e.target.value);
        if (e.target.value == ""){
          this.clearParams();
          this.$nextTick(()=>{
            this.$refs.inputPassword.focus();
          });
        }
      },
      onSearch(){
        this.pressEnter();
      },
      async pressEnter() {
        // console.log("触发回车");
        // console.log(this.reserveUserNo);
        let userUrll = this.reserveUserNo;
        this.params.userNo = "";
        let regNumber = /^[0-9]*[1-9][0-9]*$/.test(userUrll);
        let regChinese = /^[a-zA-Z\u4e00-\u9fa5]+$/.test(userUrll);
        // 纯数字、纯字母、中英文混合的都不继续执行并清除
        if (regNumber || regChinese || userUrll.trim() == ""){
          this.clearParams();
          return
        }
        // console.log(this.params.userNo);
        this.spinning = true;
        let param = await forgotCardManageApi.getScanInfoList({
          scanUrl: userUrll
        });
        // console.log(param);
        this.spinning = false;
        if (param.data.success) {
          let obj = param.data.result;
          if(obj.employeeNo.trim() == ""){
            this.clearParams();
            this.saveButtonDisabled = true;
            this.$warning({
              title: '无效二维码，请重试！',
            });
            return
          } else{
            this.reserveUserNo = "";
            this.params.userNo = obj.employeeNo;
          }
        } else {
          this.clearParams();
          this.$warning({
            title: param.data.message
          });
          return
        }

        // 第一种方案，扫码得到对象格式
        // if (param && typeof param === "object"){
        //   if(param && param.employeeNo){
        //     this.params.userNo = param.employeeNo;
        //   } else{
        //     this.params.userNo = "";
        //     this.$warning({
        //       title: '无效二维码，请重试！',
        //     });
        //     return
        //   }
        //
        // } else {
        //   this.clearParams();
        //   this.$warning({
        //     title: '无效二维码，请重试！',
        //   });
        //   return
        // }

        if (this.params.userNo.trim() == "") return;
        this.spinning = true;
        let resp = await forgotCardManageApi.getForgotCardEmpInfo(this.params.userNo);
        // console.log(resp.data);
        this.spinning = false;
        if (resp.data.success) {
          this.params = {
            userNo: resp.data.result.personalNumber,
            userName: resp.data.result.chineseName,
            depName: resp.data.result.orgunitShort,
            workPlace: resp.data.result.workLocation
          };
          // 查询成功后,页面展示员工信息，不在黑名单保存按钮可点击
          if(resp.data.result.isHaveBlack == 0){
            this.saveButtonDisabled = false;
          } else {
            this.saveButtonDisabled = true;
            this.clearParams();
            this.$warning({
              title: '该员工已添加黑名单,不能进行扫码登记！',
            });
          }
        } else {
          this.params.userNo = "";
          this.saveButtonDisabled = true;
          // this.$message.error(resp.data.message);
          this.$warning({
            title: '未查询到该工号信息，请重试！',
          });
        }
      },
      clearParams(){
        this.params = {
          userNo:"",
          userName:"",
          depName:"",
          workPlace:""
        };
        this.reserveUserNo = "";
      },
      async submit() {
        let that = this;
        console.log(this.$store.state.user);
        if (this.params.userNo.trim() == ""){
          this.$message.warning('工号不能为空，请扫二维码！');
          this.saveButtonDisabled = true;
          return
        }
        if (this.forgotTypeId == ""){
          this.$message.warning("请选择忘带卡类型");
          return
        }
        this.spinning = true;
        let resp = await forgotCardManageApi.addForgotCardEmpInfo({
          workLocation: this.params.workPlace,
          orgunitShort: this.params.depName,
          chineseName: this.params.userName,
          personalNumber: this.params.userNo,
          forgotCardType: this.forgotTypeId,
          userSerial: this.$store.state.user.userSerial
        });
        this.spinning = false;
        if (resp.data.success) {
          this.$message.success("登记成功");
          this.clearParams();
          this.forgotTypeValue = undefined;
          this.forgotTypeId = "";
        } else {
          this.$message.error(resp.data.message);
        }
      },
      quitLogin(){
        // 退出清空登陆人信息
        localStorage.setItem("state", JSON.stringify({
          selectedKeys: [""],
          user: {},
          menuList:[],
          isSuper:"否"
        }));
        this.$store.commit("addUser",{});
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))

        this.$router.replace('/loginDoorman')
      },


    },
  }
</script>

<style>
  .loginDoormanHeader{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
</style>

